<!DOCTYPE html>
<html>
    <head>
        <title>ColorPicker - jQuery plugin</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/colorpicker.js"></script>
    </head>
    <body>
        <div id="colorpickerHolder"></div>
        <div id="colorpickerHolderLight"></div>
        <div>
            <div>demo3</div>
            <div>
                <input class="input-color" type="text" maxlength="6" size="6" id="colorpickerField1" value="" />
            </div>
            <div>demo4</div>
            <div>
                <input class="input-color" type="text" maxlength="6" size="6" id="colorpickerField2" value="" />
            </div>
            <div>demo5</div>
            <div>
                <input class="input-color" type="text" maxlength="6" size="6" id="colorpickerField3" value="" />
            </div>
        </div>
        <script type="text/javascript">
            $('#colorpickerHolder').ColorPicker({flat:true});
            $('#colorpickerHolderLight').ColorPicker({flat:true, mode:'light'});
            $('.input-color').ColorPicker();
        </script>
    </body>
</html>